<template>
  <!--分类详情 -->
  <div class="fnelie">
    <div class="shoso"><shosu @getTreeData="testData"></shosu></div>
    <div class="biejyans">
      <div class="liebiao">
        <loadingt :waterData="list"></loadingt>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../../http/API";
import loadingt from "../Lazyloading.vue";
import shosu from "../Search.vue";
export default {
  name: "fenlxiangqing",
  components: {
    loadingt,
    shosu,
  },
  data() {
    return {
      // 商品id
      id: this.$route.query.userId,
      list: [],
    };
  },
  watch: {
    $route: {
      handler(to, from) {
        // to：目标路由对象

        if (to.path == "/fenlxiangqing") {
          // if (to.meta.maksd) {
            // console.log("不给刷新");
            this.ClassifyContent(to.query.userId);
          //   // to.meta.maksd = false;
          // }
        }
      },
    },
  },
  created() {
    this.ClassifyContent(this.id);
    // console.log("12346532");
  },
  activated() {
    this.ClassifyContent(this.id);
    this.guanb();
  },

  beforeRouteLeave(to, from, next) {
    // // console.log(to);
    // console.log(from);
    if (to.path == "/Classify" && from.path == "/fenlxiangqing") {
      // console.log(from);
      // from.meta.maksd = true;
      console.log(from.meta.maksd);
      this.list=[]
    }

    next();
  },

  //   activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
  // deactivated:  页

  deactivated() {
    window.removeEventListener("scroll", this.handleScroll);
  },

  methods: {
    // 滚动事件
    //
    testData(data) {
      console.log("parent");
      this.$router.push("/Classify");
      // console.log(data);
    },
    handleScroll() {
      let scrollTop = window.pageYOffset;
      this.$route.meta.Yaxis = scrollTop;
      // console.log(this.$route.meta.Yaxis);
    },
    guanb() {
      window.addEventListener("scroll", this.handleScroll);
    },

    // 分类详情
    ClassifyContent(id) {
      this.$get(API.GET_GOODS_LIST, { categoryId: id }).then((res) => {
        // console.log(res.data);
        // this.list = [];
        this.list = res.data.list;
        // console.log(this.list);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.shoso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
}
.biejyans {
  margin-top: 60px;
  background-color: @background;
}
.liebiao {
  .sj();
  // padding-bottom: 50px;
}
.fnelie {
  width: 100%;
  height: 100%;
  background-color: @background;
}
</style>
